<template>
  <div>
    <!-- 轮播图 -->
    <top-carousel :items="carouselitems"></top-carousel>
    <!-- 官方歌单 -->
    <div class="official-song">
      <div class="title-line">
        <h1 class="mini-title">官方歌单</h1>
        <h3 class="gray-title">官方甄选订阅歌单</h3>
        <div class="blankDiv"></div>
      </div>
      <!-- 音乐单轮播图 -->
      <music-card :items="items"></music-card>
    </div>
    <div class="love-song">
      <div class="title-line">
        <h1 class="mini-title">推荐歌单</h1>
        <div class="blankDiv"></div>
      </div>
      <!-- 歌单轮播图 -->
      <music-card :items="items"></music-card>
    </div>
  </div>
</template>

<script>
import TopCarousel from '../../components/TopCarousel'
import MusicCard from '../../components/MusicCard'

export default {
  components: {
    TopCarousel,
    MusicCard
  },
  data() {
    return {
      carouselitems: [
        { name: 'Ippudo', _id: '001', img: 'images/1.png' },
        { name: 'Ippudo', _id: '002', img: 'images/2.png' },
        { name: 'Milano', _id: '003', img: 'images/3.png' },
        { name: 'Tsing Tao', _id: '004', img: 'images/4.png' },
        { name: 'Frances', _id: '005', img: 'images/5.png' },
        { name: 'Frances', _id: '006', img: 'images/6.png' }
      ],
      items: [
        { name: 'Ippudo', tag: 'Japanese', img: 'images/1.jpg' },
        { name: 'Ippudo', tag: 'Japanese', img: 'images/2.jpg' },
        { name: 'Milano', tag: 'Pizza', img: 'images/3.jpg' },
        { name: 'Tsing Tao', tag: 'Chinese', img: 'images/4.jpg' },
        { name: 'Frances', tag: 'French', img: 'images/5.jpg' },
        { name: 'Frances', tag: 'French', img: 'images/6.jpg' },
        { name: 'Ippudo', tag: 'Japanese', img: 'images/7.jpg' },
        { name: 'Ippudo', tag: 'Japanese', img: 'images/8.jpg' },
        { name: 'Milano', tag: 'Pizza', img: 'images/9.jpg' },
        { name: 'Tsing Tao', tag: 'Chinese', img: 'images/10.jpg' },
        { name: 'Frances', tag: 'French', img: 'images/11.jpg' },
        { name: 'Frances', tag: 'French', img: 'images/12.jpg' }
      ]
    }
  },
  computed: {},
  methods: {}
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  min-height: 100vh;
}
.mini-title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin-left: 30px;
  float: left;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 1px;
}
.gray-title {
  float: left;
  margin-left: 21px;
  margin-top: 12px;
  font-size: 13px;
  color: gray;
}
.blankDiv {
  clear: both;
}
</style>
